<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.min.js"></script>
    <style>
        .inner{
            height: 150px;
            background-color: darkcyan;
        }
    </style>
</head>
<body>
    <div id="app">
          <!-- .stop：阻止冒泡 -->
        <!-- <div class="inner" @click = "div1Handle">
            <input type="button" value="戳他" @click.stop = "btnHandle"> 
        </div> -->
        
        <!-- .self:是只点击自己才触发，里面的冒泡不会执行 -->
        <!-- <div class="inner" @click.self= "div1Handle">
            <input type="button" value="戳他" @click = "btnHandle"> 
        </div> -->
        
        <!-- .prevent:阻止事件的默认行为 -->
        <!-- <a href="http://www.baidu.com" @click.prevent = "linkHandle">百度一下，你就知道</a> -->
        
        <!-- .once:事件只执行一次，这里的用法是只阻止一次默认行为，第二次点击不阻止默认行为 -->
        <a href="http://www.baidu.com" @click.prevent.once = "linkHandle">百度一下，你就知道</a>
    </div>
    
    <script>
        var vm = new Vue({
            el:"#app",
            data:{

            },
            methods: {
              div1Handle() {
                  console.log("这是触发了inner div的点击事件")
              },
              btnHandle() {
                  console.log("这是触发了tbtn 按钮的点击事件")
              },
              linkHandle(){
                  console.log("这是触发了a 按钮的点击事件")
              }
            }
        });
    </script>
</body>
</html>